<template>
  <div class="child">
    <div class="serch">
      <div>
        <el-input v-model="serchName" placeholder="搜索合同名称" />
        <el-button type="danger">搜索</el-button>
      </div>
    </div>
    <div class="operation">
      <div class="btn">
        <span><img src="../../assets/contract/icon_dianqian@2x.png" alt=""><a>转入待签署</a></span>
        <span><img src="../../assets/contract/shangchuan@2x.png" alt=""><a>上传本地文件</a></span>
        <span><img src="../../assets/contract/icon_del@2x.png" alt=""><a>删除</a></span>
      </div>
      <!-- <div class="fun">
        <span><img src="../../assets/contract/icon_dayin.png" alt=""><a>打印</a></span>
        <span><img src="../../assets/contract/icon_shaixuan.png" alt=""><a>筛选</a></span>
        <span><img src="../../assets/contract/icon_daochu.png" alt=""><a>导出</a></span>
      </div> -->
    </div>
    <div class="table-main">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column prop="num" label="合同编号" align="center" />
        <el-table-column prop="mingcheng" label="合同名称" align="center" />
        <el-table-column prop="name" label="创建人" align="center" />
        <el-table-column prop="date" label="创建时间" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === &quot;1&quot;">已完成</span>
            <span v-if="scope.row.status === &quot;2&quot;">进行中</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="律师审查" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === &quot;1&quot;" class="review1 public">已审查</span>
            <span v-if="scope.row.status === &quot;2&quot;" class="review2 public" @click="review()">发起审查</span>
          </template>
        </el-table-column>
        <el-table-column prop="shencha" label="发起协作" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.shencha === &quot;1&quot;" class="review1 public">已完成</span>
            <span v-if="scope.row.shencha === &quot;2&quot;" class="team2 public" @click="collaboration()">发起协作</span>
          </template>
        </el-table-column>
        <el-table-column prop="caozuo" label="操作" align="center" />
      </el-table>
    </div>
    <!-- 发起协作弹窗 -->
    <div class="dialog-signed">
      <el-dialog :visible.sync="isTeam" width="900px" top="15vh" title="发起协作（可多人同时共同编辑文档）" center>
        <div class="dia-top">
          <!-- <span><i class="el-icon-plus"></i><a>新增</a></span>
          <span><i><img src="../../assets/contract/icon_shaixuan.png" alt=""></i><a>筛选</a></span>
          <span><i><img src="../../assets/contract/icon_dayin.png" alt=""></i><a>打印</a></span>
          <span><i><img src="../../assets/contract/icon_daochu.png" alt=""></i><a>导出</a></span> -->
          <a>
            <el-input v-model="serchName" placeholder="搜索内容" />
            <el-button type="danger">搜索</el-button>
          </a>
        </div>
        <div class="table-main">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" />
            <el-table-column prop="name" label="序号" align="center"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column>
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="address" label="联系电话" align="center" />
            <el-table-column prop="address" label="邮箱" align="center" />
          </el-table>
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
            />
          </div>
          <div class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false">发起协作</el-button>
            <span style="display:inline-block;width:40px;" />
            <el-button @click="isSigned = false">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serchName: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        mingcheng: '王小虎',
        num: '1111100000999',
        status: '2',
        shencha: '2',
        xiezuo: '1',
        caozuo: '2'
      }],
      isTeam: false
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    review() {
      console.log('111111')
    },
    collaboration() {
      this.isTeam = true
    }
  }
}
</script>

<style scoped>
.child{
  height: calc(100vh - 173px);
  background:#fff;
  padding:20px;
}
/deep/.el-input{
  width:300px;
}
/deep/.el-input__inner{
  border-radius:4px 0 0 4px;
}
/deep/.el-button--danger{
  width:95px;
  background-color: #DF090D;
  border-color: #DF090D;
}
/deep/.el-button--primary{
  background-color: #DF090D;
  border:none;
  border-radius:20px;
  width:190px;
}
/deep/.el-button--default{
  border-radius:20px;
  width:190px;
}
.serch{
  overflow: hidden;
}
.serch > div{
  float:right;
  padding-top:10px;
}
.operation{
  margin-top:10px;
}
.operation>div{
  display:inline-block;
}
.operation>.btn>span{
  display:inline-block;
  height:32px;
  border:1px solid #666;
  border-radius:20px;
  line-height: 32px;
  text-align: center;
  font-size:14px;
  padding:0 25px;
  margin-left:20px;
  color:#666;
}
.operation>.btn>span>img{
  width:14px;
  height:14px;
  vertical-align: middle;
}
.operation>.btn>span>a,.operation>.fun>span>a{
  margin-left:8px;
}
.operation>.fun{
  float:right;
  margin-top:20px;
}
.operation>.fun>span{
  margin-left:20px;
  color:#666;
}
.table-main{
  margin-top:20px;
}
/deep/.el-table th{
  background:#F7F7F7;
}
/deep/.el-table th.is-leaf{
  border:none;
}
/deep/.el-table thead{
  color:#666;
}
.public{
  display:inline-block;
  width:110px;
  height:30px;
  line-height: 30px;
  border-radius:15px;
  cursor: pointer;
}
.review1{
  background:#F1F1F1;
  color:#999;
}
.review2{
  background:#E70000;
  color:#fff;
}
.team2{
  color:#E70000;
  background:#fff;
  border:1px solid #E70000;
}
.dialog-signed /deep/.el-dialog{
  height:600px;
  border-radius:10px;
}
.dialog-signed /deep/.el-dialog__header{
  padding:10px;
  background:#eee;
  border-radius:10px 10px 0 0;
}
/deep/.el-dialog__close{
  display:none;
}
/deep/.el-input {
  width:300px;
}
.dia-top{
  overflow: hidden;
  line-height: 36px;
  margin-bottom:30px;
}
.dia-top>span{
  margin:0 10px;
}
.dia-top>span>a{
  margin-left:5px;
}
.dia-top>a{
  float:right;
}
/deep/.el-input--medium .el-input__inner{
  border-radius:0;
}
/deep/.el-button--danger{
  width:100px;
  border-radius:0 5px 5px 0;
  background:#DF090D;
}
/deep/.dialog-footer{
  text-align: center;
  margin-top:30px;
}
.page{
  text-align: center;
  margin-top:30px;
  height:30px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background:#E21111;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color:#E21111;
}
/deep/.el-dialog__title{
  font-size:16px;
}
</style>
